<template>

    <div class="m-style have-nav">
        <blockIndexNavBar title="兑付明细"></blockIndexNavBar>
        <!--        <van-row>-->
        <!--            <van-col span="16">-->
        <!--                <van-search-->
        <!--                        placeholder="请输入姓名"-->
        <!--                        v-model="searchCondition"-->
        <!--                        @search="onSearch"-->
        <!--                >-->
        <!--                </van-search>-->
        <!--            </van-col>-->
        <!--            <van-col span="8" class="search-btn">-->
        <!--                <van-button type="primary" size="small" @click="onSearch">搜索</van-button>-->
        <!--            </van-col>-->
        <!--        </van-row>-->
        <!--        <van-dropdown-menu>-->
        <!--            <van-dropdown-item title="筛选" ref="item">-->
        <!--                <van-cell title="兑付日期:" :value="date" @click="show = true"/>-->
        <!--                <van-calendar v-model="show" type="range" @confirm="onDateConfirm" :show-confirm="false"-->
        <!--                              :min-date="minDate"/>-->
        <!--                <div style="padding: 5px 16px;">-->

        <!--                    <van-row>-->
        <!--                        <van-col span="12" style="padding-right: 10px;  ">-->
        <!--                            <van-button type="danger" size="mini" block round @click="onConfirm">-->
        <!--                                确认-->
        <!--                            </van-button>-->
        <!--                        </van-col>-->
        <!--                        <van-col span="11">-->
        <!--                            <van-button type="danger" size="mini" block round @click="reset">-->
        <!--                                重置-->
        <!--                            </van-button>-->
        <!--                        </van-col>-->
        <!--                    </van-row>-->


        <!--                </div>-->
        <!--            </van-dropdown-item>-->
        <!--        </van-dropdown-menu>-->

        <!--        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">-->
        <!--            <van-list-->
        <!--                    v-model="loading"-->
        <!--                    :finished="finished"-->
        <!--                    finished-text="没有更多了"-->
        <!--                    @load="getData"-->
        <!--            >-->
        <!--                <lee-card v-for="item in dataList" :key="item._id">-->
        <!--                    <van-row>-->
        <!--                        <van-col span="12">姓名</van-col>-->
        <!--                        <van-col span="12">{{ item.userName }}</van-col>-->
        <!--                    </van-row>-->
        <!--                    <van-row>-->
        <!--                        <van-col span="12">身份证号码</van-col>-->
        <!--                        <van-col span="12">{{ item.idCard }}</van-col>-->
        <!--                    </van-row>-->
        <!--                    <van-row>-->
        <!--                        <van-col span="12">兑付日期</van-col>-->
        <!--                        <van-col span="12">{{ item.redemptionDate }}</van-col>-->
        <!--                    </van-row>-->
        <!--                    <van-row>-->
        <!--                        <van-col span="12">延付年份</van-col>-->
        <!--                        <van-col span="12">{{ item.deferredYear }}</van-col>-->
        <!--                    </van-row>-->
        <!--                    <van-row>-->
        <!--                        <van-col span="12">延付月份</van-col>-->
        <!--                        <van-col span="12">{{ item.deferredMonth }}</van-col>-->
        <!--                    </van-row>-->
        <!--                    <van-row>-->
        <!--                        <van-col span="12">延付金额</van-col>-->
        <!--                        <van-col span="12">{{ item.deferredMoney }}</van-col>-->
        <!--                    </van-row>-->
        <!--                    <van-row>-->
        <!--                        <van-col span="12">兑付年份</van-col>-->
        <!--                        <van-col span="12">{{ item.redemptionYear }}</van-col>-->
        <!--                    </van-row>-->
        <!--                    <van-row>-->
        <!--                        <van-col span="12">兑付月份</van-col>-->
        <!--                        <van-col span="12">{{ item.redemptionMonth }}</van-col>-->
        <!--                    </van-row>-->
        <!--                    <van-row>-->
        <!--                        <van-col span="12">兑付次数</van-col>-->
        <!--                        <van-col span="12">{{ item.redemptionNumber }}</van-col>-->
        <!--                    </van-row>-->
        <!--                    <van-row>-->
        <!--                        <van-col span="12">实兑付金额</van-col>-->
        <!--                        <van-col span="12">{{ item.redemptionMoney }}</van-col>-->
        <!--                    </van-row>-->
        <!--                    <van-row>-->
        <!--                        <van-col span="12">摘要</van-col>-->
        <!--                        <van-col span="12">{{ item.summary }}</van-col>-->
        <!--                    </van-row>-->
        <!--                </lee-card>-->
        <!--            </van-list>-->
        <!--        </van-pull-refresh>-->
        <m_pageList
            ref="pageList"
            :url="url"
            :cols="cols"
            :list-cond="listCond"
            @toDetail="toDetail"
        >
            <template v-slot="scope">
                <strong>{{ scope.row.redemptionDate }}</strong>
            </template>
        </m_pageList>
    </div>
</template>

<script>
import {Config} from "@/config/formDataOptions";
import blockIndexNavBar from "@/components/blockIndexNavBar";
import LeeCard from "@/uitl/card";
import {API_URL} from "@/config/urlInfo";
import m_pageList from "@/uitl/m_pageList";

export default {
    name: "duifuList",
    components: {
        LeeCard,
        blockIndexNavBar,
        m_pageList
    },
    data() {
        return {
            url: API_URL.redemptionDetailsList,
            cols: {
                show: [
                    {title: '延付年份', field: 'deferredYear'},
                    {title: '延付月份', field: 'deferredMonth'},
                    {title: '延付金额', field: 'deferredMoney'},
                    {title: '兑付年份', field: 'redemptionYear'},
                    {title: '兑付月份', field: 'redemptionMonth'},
                    {title: '兑付次数', field: 'redemptionNumber'},
                    {title: '实兑付金额', field: 'redemptionMoney'},
                    {title: '摘要', field: 'summary'}
                ],
                // hide: [
                //     {title: '位置', field: 'address'}
                // ]
            },
            listCond: {},
            minDate: new Date(1990, 0, 1),
            searchCondition: "",
            list: [],
            loading: false,
            finished: false,
            refreshing: false,
            dataList: [],
            date: '',
            show: false,
            currentPage: 1,
        };
    },
    mounted() {
        this.getData()
    },
    methods: {
        toDetail() {
            console.log("1")
        },
        formatDate(date) {
            console.log(date.getFullYear())
            return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
        },
        onDateConfirm(date) {
            const [start, end] = date;
            this.show = false;
            this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
            this.getData()
        },
        reset() {
            this.date = ""
            this.getData()
        },
        onConfirm() {
            this.$refs.item.toggle();
        },
        tabformatDate(item) {
            let data = item
            if (data == null || data === '') {
                return ""
            }
            let dt = new Date(data)
            return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
        },
        onSearch() {
            this.getData()
        },
        onRefresh() {
            // 清空列表数据
            this.finished = false;

            // 重新加载数据
            // 将 loading 设置为 true，表示处于加载状态
            this.loading = true;
            this.dataList = [];
            this.currentPage = 1;
            this.getData();
        },

        getData() {
            Config.getDatas(API_URL.redemptionDetailsList, {
                data: {
                    size: 15,
                    page: this.currentPage,
                    searchCondition: this.searchCondition,
                    redemptionDate: this.date
                }
            }, (res) => {
                let list = res.list
                this.loading = false;
                this.refreshing = false;
                if (!list || list.length < 15) {
                    this.finished = true;
                } else {
                    this.currentPage++;
                    this.finished = false;
                }
                this.dataList.push(...list)
            }, this)
        }
    }
}
</script>

<style scoped lang="less">
.search-btn {
    .van-button {
        width: 48%;
        margin-right: 1%;
    }

    background: #fff;
    text-align: center;
    padding: 11px 0;
}

.list-btn {
    .van-button {
        width: 45%;
        margin-right: 2%;
        float: right;
    }
}

.wt-card {
    margin: 0.4rem;
    background: #fff;
    overflow: hidden;
    border-radius: 0.3rem;
    padding: 0.4rem;
    box-shadow: 0 0 0.2rem #ccc;
    border-bottom: 0.1rem solid #ccc;
}


.icons-warp {
    border-radius: 25px;

    .float-icon-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 50px;
        height: 50px;

        img {
            width: 25px;
            height: 25px;
            margin-bottom: 3px;
        }

        span {
            font-size: 9px;
            color: #666666;
        }
    }
}

</style>
